<template>
  <div class="container">
    <list
        class="withdraw-list-container"
        @scroll="onPageScroll">
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <header>
        <navbar title="我的羽毛" theme="gradient" ></navbar>
      </header>
      <cell>
        <div class="header" ref="top">
          <div class="integral-box">
            <text class="integral-val">{{integral.toFixed(2)}}</text>
          </div>
          <text class="integral-info" @click="showDesc">羽毛可以用来做什么，怎样才能获得羽毛 &gt;&gt;</text>
        </div>
      </cell>
      <cell v-for="flow in walletFlowDetailList" v-bind:key="flow.id">
        <div class="wallet-flow" >
          <div class="flow-detail">
            <text class="flow-title">{{flow.typeTitle}}</text>
            <text class="flow-time">{{flow.createTime}}</text>
          </div>
          <div class="flow-right">
            <text :class="['flow-val', flow.value > 0 && 'flow-val-income']">{{flow.value > 0 ? '+ ' + flow.value.toFixed(2) : '- ' + (-flow.value.toFixed(2))}}</text>
            <text :class="['flow-status', checkStatusStyle(flow)]" v-if="flow.status">{{flow.statusTitle}}</text>
          </div>
        </div>
      </cell>
      <cell>
        <page-notice msg="抱歉，什么都木有找到～" v-if="walletFlowDetailList.length == 0  && !hasNext"></page-notice>
      </cell>
      <page-loading-more v-on:loadingMore="onLoadingMore" :loadingMore="loadingMore"
                         :shown="hasNext"></page-loading-more>
    </list>
    <page-scrolltop :shown="pageScrollTopShown" @click="gotoTop"></page-scrolltop>
    <wxc-loading :show="loadingShow"></wxc-loading>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/buttons";
  @import "./sass/form";
  @import "./sass/activeable";
  .container{
    background-color: $body-bg;
    transition: transform .3s linear
  }
  .header {
    background-image: $gradient-bg-primary;
  }
  .integral-info {
    color: #f7f7f7;
    font-size: 30px;
    font-weight: 300;
    padding: 0 10px 10px 10px;
    text-align: center;
  }
  .integral-box {
    height: 150px;
    flex-direction: row;
    justify-content: center;
    padding-top: 20px;
    &-info {
      &-title {
        color: #FFFFFF;
        font-size: 24px;
        margin-bottom: 10px;
      }
      &-val {

      }
    }
  }

  .integral-val {
    font-size: 80px;
    color: #ffe500;
    font-weight: 100;
  }

  .withdraw-panel {
    padding: 40px;
    &-tip {
      color: $color-muted;
      font-size: 24px;
      padding: 0px 0 30px;
      text-align: center;
    }
  }

  .filterbar {
    flex-direction: row;
    justify-content: space-between;
    &-item {
      text-align: center;
      height: 80px;
      background-color: #FFFFFF;
      line-height: 80px;
      color: $color;
      font-size: 32px;
      @include border-bottom(1px, solid, #ddd);
      flex: 1;
      &-current {
        color: $color-primary;
        @include border-bottom(1px, solid, $brand-primary);
      }
    }
  }
  .wallet-flow {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #FFFFFF;
    @include border-bottom(1px, solid, #ddd);
  }
  .flow {
    &-detail {

    }
    &-right {
      align-items: flex-end;
    }
    &-status {
      font-size: 24px;
    }
    &-title {
      color: $color;
      font-size: 30px;
      margin-bottom: 5px;
      font-weight: 300;
    }
    &-time {
      font-size: 28px;
      color: $color-muted;
      font-weight: 300;
    }
    &-val {
      font-size: 50px;
      color: $color-primary;
      font-weight: 300;
      &-income {
        color: $color-success;
      }
    }
  }
</style>
<script>

let api = require('./include/api')
let Deferred = require('Deferred')
require('./include/page-xdom')
let navigator = require('./include/xnavigator')
let DEFAULT_SEARCH_PARAM = {
  page: 1,
  valueType: 'INTEGRAL'
}
module.exports = {
  mixins: [
    require('./mixin/page-refresh'),
    require('./mixin/page-loading-more'),
    require('./mixin/page-scrolltop')
  ],
  components: {
    'page-notice': require('./components/page-notice.vue'),
    navbar: require('./components/navbar.vue')
  },
  data () {
    return {
      integral: 0,
      walletFlowDetailList: [],
      wallet: {},
      hasNext: true,
      searchParam: Object.assign({}, DEFAULT_SEARCH_PARAM)
    }
  },
  created () {
    Deferred.when(this.loadData(), this.search()).always(() => {

    })
  },
  methods: {
    loadData () {
      api.page.myBalance.data(this.searchParam).done(rs => {
        let wallet = rs.data.wallet
        this.wallet = wallet
        this.integral = this.wallet.integral
      })
    },
    showDesc () {
      navigator.push('webpage.js?code=INTEGRAL_DESC&title=' + encodeURIComponent('羽毛的用途'))
    },
    onXRefresh (event) {
      this.searchParam.page = 1
      this.onRefresh(event, this.doRefresh())
    },
    doRefresh () {
      return Deferred.when(this.loadData(), this.search())
    },
    onLoadingMore (event) {
      this.loadingMore = true
      this.searchParam.page = this.searchParam.page + 1
      this.search(true, () => {
        this.loadingMore = false
      })
    },
    gotoTop () {
      let dom = weex.requireModule('dom')
      dom.scrollToElement(this.$refs.top)
    },
    onPageScroll (event) {
      this.onPageScrollForScrollTop(event)
    },
    search (append, callback) {
      // if(this.loading) {
      //   return new Deferred().resolve()
      // }
      this.loading = true
      return api.walletFlowDetail.search(this.searchParam).done((rs) => {
        if (append) {
          this.walletFlowDetailList = this.walletFlowDetailList.concat(rs.data.results)
        } else {
          this.walletFlowDetailList = rs.data.results
        }
        let paging = rs.data
        this.hasNext = paging.hasNext
      }).always(() => {
        this.loading = false
        callback && callback()
      })
    },
    checkStatusStyle (flowDetail) {

    }
  }
}
</script>
